<th-canvas>
  <th-scene>
    <th-ambientLight [intensity]="3" />

    <!-- binding  onUpdate and onLoad events-->
    <th-object3D
      loadGLTF
      [url]="assetPath"
      [rotation]="this.rotation"
      [position]="this.position"
      (onUpdate)="logUpdates($event)"
      (onLoaded)="onLoaded()"
      />

    <th-gridHelper [args]="[10, 10]" />
    <th-pointLight [position]="[10, 10, 10]" [intensity]="3" />

    <th-perspectiveCamera [args]="[45, 2, 0.1, 100]" [position]="[10, 10, 10]" [lookAt]="[0, 0, 0]">
      <!--
      binding to three.js events:
      1) change: with bind directive for preserving this scope
      2) end: with using a fat arrow member function for preserving this scope
      -->
      <th-orbitControls
        [threeEvents]="{
          change: onOrbitControlChange | bind: this,
          end: onOrbitControlEnd
        }"
        />
    </th-perspectiveCamera>
  </th-scene>
</th-canvas>

<div class="change-list">
  <h1>Updates</h1>
  <ol>
    @for (change of changes; track change) {
      <li>
        {{ change }}
      </li>
    }
  </ol>
</div>
